<html xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="common.css"/>
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:800px;"></div>

    <script>
        function expand(){
            document.getElementsByTagName("table")[0].className = ''
            document.getElementById("btn1").className = 'hidden'
            document.getElementById('btn2').className = ''

        }
        function collpase(){
            document.getElementsByTagName("table")[0].className = 'hidden'
            document.getElementById("btn1").className = ''
            document.getElementById('btn2').className = 'hidden'
        }
    </script>
        <h1>状态日志</h1>
        <div id="btn1">
            <button  onclick="expand()">展开</button>
        </div>
        <div id="btn2" class="hidden"  ><button  onclick="collpase()">收起</button></div>
        <table  class="hidden" >
            <tr>
                <th>ID</th>
                <th>ticks</th>
                <th class="deviceId">IMEI</th>
                <th>电源模式</th>
                <th>电源开关</th>
                <th>GPS开关</th>
                <th>GPS状态</th>
                <th>电量</th>
                <th>上报时间</th>
            </tr>
            <tr th:each="log : ${logs}">
                <td th:text="${log.id}"></td>
                <td th:text="${log.ticks}"></td>
                <td class="deviceId" th:text="${log.deviceId}"></td>
                <td th:text="${log.powerMode}"></td>
                <td th:text="${log.powerSwitch == 1 }? '开':'关'"></td>
                <td th:text="${log.gpsSwitch == 1 }? '开':'关'"></td>
                <td th:text="${log.gpsStatus}"></td>
                <td th:text="${log.battery}"></td>
                <td th:text="${#temporals.format(log.updateTime, 'dd/MM/yyyy HH:mm:ss')}"></td>
            </tr>
        </table>
        <script th:inline="javascript">
            var datas = [[${logs}]];
            console.log(datas);
        </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var ids = datas.map((e) => {return e.updateTime})
        var battery = datas.map((e) => {return e.battery})
        
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
            xAxis: {
                data: ids
              },
              dataZoom: [
              {
                type: 'inside'
              },
              {
                type: 'slider'
              }
            ],
            yAxis: {
                splitArea: {
                    show: false
                  }
            },
            series: [
            {
                data: battery,
                type: 'line',
                smooth: true
            }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>

</html>